File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="../../resources/css/reset.css">
<link rel="stylesheet" href="../../resources/css/style.css">
<link rel="stylesheet" href="../../resources/css/component.css">
<link rel="stylesheet" href="../../resources/css/common.css">
<link rel="stylesheet" href="../../resources/css/responsive.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<title>TAKENSOFT</title>
</head>
<body>
<div id="header"></div>
<div class="swiper mySwiper About">
<div class="swiper-wrapper">
<div class="swiper-slide about-wrapper">
<div class="about-wrap slide-wrap ">
<div class="flex">
<div class="about-title mb90" style="width: 100%;">
<p class="mb20">ABOUT US</p>
<p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
</div>
<div class=" flex justify-center about-area"
style="width: 100%; gap: 190px; margin-bottom: 50px;">
<div class="about-radius-left solution-ani">
<p class="about-text">공감</p>
<p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
</div>
<div class="about-radius solution-ani">
<p class="about-text">구현</p>
<p class="about-sub-text">가치를 주는 솔루션 도출</p>
</div>
<div class="about-radius-right solution-ani">
<p class="about-text">생각</p>
<p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
</div>
</div>
<div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
<div class="about-radius-bottom-left ">
<p class="about-text">검증</p>
<p class="about-sub-text">결과물의 철저한 검증</p>
</div>
<div class="about-radius-bottom-right solution-ani">
<p class="about-text">소통</p>
<p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="text-area flex align-center justify-center pb60">
<div class="about-title mb20" style="width: 100%;">
<p class="mb20">Business</p>
<p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
해결합니다.</p>
</div>
<div class="container silde-box">
<div class="accordion flex justify-between"
style="background-image: url(../../resources/img/common/about-img1.png);">
<div class="slideText pl20">
<p class="accordion-num"><span>01.</span> AI Solution</p>
<p>AI 기술 종합 관리를 통한 솔루션 구현</p>
</div>
<div class="slideImg">
<img src="../../resources/img/common/about-img-db.png" alt="">
</div>
<div class="slideTextDtail">
<div>
<p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
<p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
<p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
</div>
<div class=" flex justify-between" style="flex-wrap: nowrap;">
<div style="width: 20%;">
<p>[대표사례]</p>
</div>
<div class=" flex justify-between accordion-box">
<p>·도로 위험 감지 시스템</p>
<p>·경로 최적화 서비스</p>
<p>·안개 감지 시스템</p>
<p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
</div>
</div>
</div>
</div>
<div class="accordion "
style="background-image: url(../../resources/img/common/about-img2.png);">
<div class="slideText pl20">
<p class="accordion-num"><span>02.</span> System Design</p>
<p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
</div>
<div class="slideImg">
<img src="../../resources/img/common/about-img-bg02.png" alt="">
</div>
<div class="slideTextDtail">
<p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
통해 고객사 최적화 UI 도출 </p>
<div class=" flex justify-start" style="flex-wrap: nowrap;">
<div style="width: 20%;">
<p>[대표사례]</p>
</div>
<div class="flex-column">
<p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
<p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
<p>· 경로 최적화 서비스</p>
<p>· 시니어 스마트 케어 모니터링 플랫폼</p>
</div>
</div>
</div>
</div>
<div class="accordion"
style="background-image: url(../../resources/img/common/about-img3.png);">
<div class="slideText pl20">
<p class="accordion-num"><span>03.</span> Data Science </p>
<p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
</div>
<div class="slideImg">
<img src="../../resources/img/common/about-img-bg03.png" alt="">
</div>
<div class="slideTextDtail">
<p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
<p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
<p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
수요기관 및 기업 확장
</p>
<div class=" flex justify-start" style="flex-wrap: nowrap;">
<div style="width: 20%;">
<p>[대표사례]</p>
</div>
<div class="flex-column">
<p>· 데이터 품질관리 컨설팅</p>
<p>· AI 안전통합 횡단보도 플랫폼</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide about">
<div class="text-area flex pb60">
<div class="about-title mb20" style="width: 100%;">
<p class="mb20">Vision</p>
<p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
매출을 확대해 나갑니다.
</p>
</div>
<div class="flex justify-center about-vision-box">
<img src="../../resources/img/common/about-img5.png" alt="">
<img src="../../resources/img/common/about-img4.png" alt="">
</div>
</div>
</div>
<div class="swiper-slide history" id="history">
<div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
<div class="text-area felx">
<div class="about-title mb20">
<p>History</p>
</div>
<div class="timeline flex align-center justify-between" style="gap: 0px;">
<div class="years" id="years">
<div class="year active-year" data-year="2021">2021</div>
<div class="year" data-year="2022">2022</div>
<div class="year" data-year="2023">2023</div>
</div>
<div class=" scrollSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer"></footer>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
$(document).ready(function () {
$("#btnHeadquarter").click(function () {
$("#btnHeadquarter").addClass('on');
$("#btnDaeguBranch").removeClass('on');
$("#contentDaeguBranch").hide();
$("#contentHeadquarter").show();
});
$("#btnDaeguBranch").click(function () {
$("#btnDaeguBranch").addClass('on');
$("#btnHeadquarter").removeClass('on');
$("#contentHeadquarter").hide();
$("#contentDaeguBranch").show();
});
});
function slidesPlugin(activeSlide = 0) {
const slides = document.querySelectorAll('.accordion');
let previousSlide = slides[activeSlide];
previousSlide.classList.add('active');
swapImage(previousSlide);
slides.forEach((slide) => {
slide.addEventListener('click', () => {
if (slide !== previousSlide) {
clearActiveClasses();
swapImage(previousSlide);
slide.classList.add('active');
swapImage(slide);
previousSlide = slide;
}
});
});
function clearActiveClasses() {
slides.forEach((slide) => {
slide.classList.remove('active');
});
}
function swapImage(slide) {
const slideImg = slide.querySelector('.accordion img');
const bgImg = slide.style.backgroundImage;
slide.style.backgroundImage = `url(${slideImg.src})`;
slideImg.src = bgImg.slice(5, -2);
}
}
slidesPlugin();
// 마우스 휠을 비활성화할 영역 선택
var targetArea = document.querySelector(' .scrollSwiper .swiper-slide div');
// 선택된 영역을 콘솔에 출력
console.log(targetArea);
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 30,
preventDefault: false, //per의 시작점이나 끝점에 도달했을 때 기본 스크롤 행동을 다시 활성화합니다.
mousewheel: {
releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
},
on: {
slideChange: function () {
var currentIndex = this.realIndex;
if (currentIndex === 0) {
$('#header').removeClass('active');
} else {
$('#header').addClass('active');
}
var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
if (this.activeIndex === lastIndex) {
$("#footer").show(); // 마지막 슬라이드에 도달하면 푸터를 보여줌
} else {
$("#footer").hide(); // 그렇지 않으면 푸터를 숨김
}
},
}
});
var scrollSwiper = new Swiper(".scrollSwiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
// var swiperContainer = document.querySelector('.scrollSwiper');
// // Swiper 컨테이너 내에서 마우스 휠 이벤트 발생 시 기본 동작 방지
// swiperContainer.addEventListener('wheel', function (event) {
// event.preventDefault();
// }, { passive: false });
// document.addEventListener('DOMContentLoaded', function () {
// // 연도 요소를 모두 선택
// var years = document.querySelectorAll('.year');
// // 각 연도 요소에 대해 클릭 이벤트 리스너를 추가
// years.forEach(function (year) {
// year.addEventListener('click', function () {
// // 모든 연도에서 'active-year' 클래스를 제거
// years.forEach(function (y) {
// y.classList.remove('active-year');
// });
// // 클릭한 연도에 'active-year' 클래스를 추가
// this.classList.add('active-year');
// // 모든 내용을 숨김
// var contents = document.querySelectorAll('.scrollSwiper .swiper-slide > div');
// contents.forEach(function (content) {
// content.style.display = 'none';
// });
// // 클릭한 연도와 일치하는 data-year 속성을 가진 내용만 표시
// var activeYear = this.getAttribute('data-year');
// var activeContent = document.querySelector('.scrollSwiper .swiper-slide > div[data-year="' + activeYear + '"]');
// if (activeContent) {
// activeContent.style.display = 'block';
// }
// });
// });
// });
$(function () {
$("#header").load("../layout/Header.html");
});
</script>
<style scoped>
/* 스크롤바 없애기 */
body {
-ms-overflow-style: none;
/* 인터넷 익스플로러 */
scrollbar-width: none;
/* 파이어폭스 */
}
::-webkit-scrollbar {
display: none;
}
#header {
position: fixed;
top: 0;
z-index: 3;
border-bottom: 1px solid #ced4da;
background-color: white;
}
#header .header .logo {
background: url(../../resources/img/component/logo-color.png) no-repeat;
width: 200px;
background-size: contain;
height: 25px;
}
#header .header nav li a {
color: #333;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: 'Pretendard';
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.About .swiper-slide {
text-align: center;
font-size: 18px;
/* display: flex; */
height: 100%;
position: relative;
justify-content: center;
align-items: center;
background-color: #fff;
}
.swiper-slide img {
/* height: 356px; */
display: block;
object-fit: cover;
}
.container {
width: 1200px;
height: 70%;
display: flex;
flex-wrap: nowrap;
border-radius: 20px;
overflow: hidden;
}
#history {
touch-action: none;
}
.scrollSwiper {
/* width: 100%; */
height: 100%;
overflow-y: scroll;
border: 1px solid blue;
}
.scrollSwiper .swiper-slide {
font-size: 18px;
height: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 30px;
}
.scrollSwiper .swiper-slide div {
border: 1px solid red;
text-align: left;
width: 100%;
}
</style>
</html>